<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>网上购物系统</title>
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <style>
        hr{
            margin: 0;
        }
        img{
            width: 100%;
        }
        ul{
            border: 0;
        }
        .list-group-item{
            margin-bottom: 0;
            border: 0;
            border-bottom: 1px dashed #ddd;
            background-color: inherit;
        }
        .list2{
            border-bottom: 0;
        }
        .table>tbody>tr>th{
            text-align: center;
            border-bottom: 0;
            border-top: 0;
            background: #fafafa url(http://s8.mogucdn.com/pic/140909/1blhwf_ieydemldmy4tombtmmytambqgiyde_5x40.gif) repeat-x;
        }
        .table>tbody>tr>td{
            position: relative;
            text-align: center;
            border-bottom: 1px solid #ddd;
        }
        .table>tbody>tr>td:first-child{
            border-left: 1px solid #ddd;
        }
        .table>tbody>tr>td:last-child{
            border-right: 1px solid #ddd;
        }
        table tr td img{
            width: 80px;
            height: 80px;
        }
    </style>
</head>
<body>
<!--顶部导航-->
<div id="top-part"></div>
<div id="search-part"></div>

<!--主体内容-->
<hr>
<div class="container">
    <div class="row">
        <div class="col-md-3" style="background: #f7f7f7">
            <ul class="list-group">
                <li  class="list-group-item" id="userimg-part"></li>
                <li class="list-group-item">
                    <a href="user.html">账号设置</a>
                    <ul class="list-group">
                        <li class="list-group-item list2">
                            基本信息
                        </li>
                        <li class="list-group-item list2">
                            修改头像
                        </li>
                    </ul>
                </li>
                <li class="list-group-item">我的订单
                    <ul class="list-group">
                        <li class="list-group-item list2">
                            全部订单
                        </li>
                        <li class="list-group-item list2">
                            <span class="badge">14</span>
                            待付款
                        </li>
                        <li class="list-group-item list2">
                            <span class="badge">14</span>
                            待收货
                        </li>
                        <li class="list-group-item list2">
                            <span class="badge">14</span>
                            待评价
                        </li>
                    </ul>
                </li>
                <li class="list-group-item">我的钱包</li>
                <li class="list-group-item">我的理财</li>
                <li class="list-group-item">地址管理</li>
                <li class="list-group-item">安全设置</li>
            </ul>
        </div>
        <div class="col-md-9">
            <table class="table">
                <tbody>
                    <tr>
                        <th colspan="3">商品信息</th>
                        <th>售后</th>
                        <th>实付款（元）</th>
                        <th>交易状态</th>
                        <th>操作</th>
                    </tr>
                    <tr><td colspan="7" style="border: 0"></td></tr>
                    <tr>
                        <td colspan="7" style="text-align: left;background-color: cornsilk">订单编号：12222212212&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;下单时间：12222222222</td>
                    </tr>
                    <tr>
                        <td class="col-sm-1">
                            <img src="images/4.jpg" alt="">
                        </td>
                        <td><br>商品名称商品名称</td>
                        <td><br>颜色：<br>尺码：</td>
                        <td><br>退款</td>
                        <td><br>价格<br>(包邮)</td>
                        <td><br>待发货<br>待评价</td>
                        <td><br><span class="glyphicon glyphicon-trash"></span></td>
                    </tr>
                    <tr><td colspan="7" style="border: 0"></td></tr>
                    <tr>
                        <td colspan="7" style="text-align: left;background-color: cornsilk">订单编号：12222212212&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;下单时间：12222222222</td>
                    </tr>
                    <tr>
                        <td class="col-sm-1">
                           <img src="images/4.jpg" alt="">
                        </td>
                        <td><br>商品名称商品名称</td>
                        <td><br>颜色：<br>尺码：</td>
                        <td><br>退款</td>
                        <td><br>价格<br>(包邮)</td>
                        <td><br>待发货<br>待评价</td>
                        <td><br><span class="glyphicon glyphicon-trash"></span></td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
</div>

</body>
<script src="js/jquery-1.11.0.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script type="text/javascript">
    $("#top-part").load("top-part.html");
    $("#search-part").load("search-part.html");
    $("#userimg-part").load("userimg-part.html");
</script>
</html>